<template>
  <el-autocomplete class="top-search"
                   popper-class="my-autocomplete"
                   v-model="value"
                   :fetch-suggestions="querySearch"
                   placeholder="输入关键词搜索菜单......"
                   @select="handleSelect">
		<template slot-scope="{ item }">
			<i :class="[item[iconKey],'icon']"></i>
			<div class="name">{{ item[labelKey] }}</div>
			<div class="addr">{{ item[pathKey] }}</div>
		</template>
  </el-autocomplete>
</template>

<script>
import config from "../sidebar/config.js";
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      config: config,
      value: "",
      menuList: []
    };
  },
  created () {
    this.getMenuList();
  },

  watch: {
    menu () {
      this.getMenuList();
    }
  },
  computed: {
    labelKey () {
      return this.website.menu.props.label || this.config.propsDefault.label;
    },
    pathKey () {
      return this.website.menu.props.path || this.config.propsDefault.path;
    },
    iconKey () {
      return this.website.menu.props.icon || this.config.propsDefault.icon;
    },
    childrenKey () {
      return (
        this.website.menu.props.children || this.config.propsDefault.children
      );
    },
    ...mapGetters(["menu", "website"])
  },
  methods: {
    getMenuList () {
		const findMenu = list => {
			for (let i = 0; i < list.length; i++) {
				const ele = Object.assign({}, list[i]);
				if (this.validatenull(ele[this.childrenKey])) {
					this.menuList.push(ele);
				} else {
					findMenu(ele[this.childrenKey]);
				}
			}
		};
      	this.menuList = [];
      	findMenu(this.menu);
    },
    querySearch (queryString, cb) {
		var restaurants = this.menuList;
		var results = queryString
			? restaurants.filter(item=> item.name.indexOf(queryString) != -1)
			: restaurants;
		// 调用 callback 返回建议列表的数据
		cb(results);
    },
    handleSelect (item) {
		this.value = "";
		this.$router.push({
			path: this.$router.$avueRouter.getPath({
			name: item[this.labelKey],
			src: item[this.pathKey]
			}, item.meta),
			query: item.query
		});
    }
  }
};
</script>

<style lang="scss">
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
    .icon {
      margin-right: 5px;
      display: inline-block;
      vertical-align: middle;
    }
    .name {
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: middle;
    }
    .addr {
	  height:12px;
	  line-height:12px;
      margin-bottom:5px;
      width: 100%;
      font-size: 14px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>